<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>图片投票</title>
    <script src="static/vue.js"></script>
    <script src="static/tpbase.js"></script>
    <link rel="stylesheet" href="static/tpbase.css">
    <style>
        span {
            display: inline-block;
        }

        .content {
            width: 100%;
        }

        .content1 {
            width: 100%;
            height: 6.88rem;
            margin-top: .36rem;
            background-color: white;
        }

        .c1top {
            width: 100%;
            height: 4.2rem;
            margin-top: .24rem;
        }

        .c1left {
            width: .4rem;
            height: .4rem;
            line-height: .4rem;
            text-align: center;
            color: #ffffff;
            border-radius: 50%;
            background-color: #2b75f2;
            margin-left: .4rem;
            float: left;
        }

        .c1right {
            width: 5.72rem;
            height: 4.2rem;
            margin-left: .1rem;
            float: left;
            background-size: cover;
        }

        .c1right div {
            width: .4rem;
            height: .4rem;
            text-align: center;
            float: right;
            margin: .16rem .16rem 0 0;
            border-radius: 50%;
            background-color: #986f83;
        }

        .c1right img {
            width: .3rem;
            height: .3rem;
            margin-top: .05rem;
        }

        .c1bottom {
            margin: .2rem 0 0 .9rem;
            display: flex;
        }
        .labels{
            width: .38rem;
            height: .38rem;
            margin-right: .1rem;
            border-radius: 50%;
            border: 1px solid #cccccc;
        }
        .labelsc {
            background-color: rgba(43, 117, 242, 1);
            background-image: url("imgs/勾.png");
            background-size: cover;
        }
        .inp{
            display: inline-block;
            width: .38rem;
            height: .38rem;
            opacity: 0;
            margin-right: .1rem;
        }
        .c1d{
            margin-right: .25rem;
            color: rgba(16, 16, 16, 1);
            font-size: .28rem;
        }
    </style>

</head>
<body>
<div id="app">
    <div class="top">
        <div class="head">
            <span class="back">×</span><span class="menu">···</span>
        </div>
        <div class="titles">
            <div class="title1">
                {{title}}
            </div>
            <div class="title2">
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            </div>
        </div>
    </div>
    <div class="content">
        <div class="content1" v-for="(item,index) in list">
            <div class="c1top">
                <span class="c1left">{{item.num}}</span>
                <div class="c1right" :style="{'backgroundImage':'url('+item.bgi+')'}">
                    <div><img src="imgs/search.png" alt=""></div>
                </div>
            </div>
            <div class="c1bottom" v-for="(item1,index1) in item.list1">
                <label class="labels" :class="{labelsc:item1.select}"
                       @click="selects(index,index1)">
                    <input class="inp" type="radio" :name="item1.names">
                </label>
                <div class="c1d">{{item1.name}}</div>
            </div>

        </div>
    </div>
    <div class="bottom">提交</div>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        select:false,
        data: {
            title: "图片投票",
            list:[//图片投票1,2
                {
                    num:"1",
                    bgi:"imgs/美少女.jpg",
                    list1:[//4个选项
                        {names:"1", name:"前", select:false},
                        {names:"1", name:"后", select:false},
                        {names:"1", name:"左", select:false},
                        {names:"1", name:"右", select:false},
                    ]
                },
                {
                    num:"2",
                    bgi:"imgs/美少女.jpg",
                    list1:[//4个选项
                        {names:"2", name:"前", select:false},
                        {names:"2", name:"后", select:false},
                        {names:"2", name:"左", select:false},
                        {names:"2", name:"右", select:false},
                    ]
                },
            ]
        },
        methods: {
            selects(index,index1){
                for (var i=0;i<this.list[index].list1.length;i++){
                    if(i==index1){
                        this.list[index].list1[i].select=true;
                    }
                    else{
                        this.list[index].list1[i].select=false;
                    }
                }
            }
        }
    });
</script>
</body>
</html>